<template>
  <div class="guide">
    <h3>{{ $t("language.Share.guide.name") }}</h3>
    <div class="img">
      <NuxtImg @click="openWeb('https://t.me/share')" src="/img/fly.png" alt="" />
      <NuxtImg @click="openWeb('https://m.facebook.com/')" src="/img/re9.png" alt="" />
      <NuxtImg @click="openWeb('https://api.whatsapp.com/')" src="/img/re8.png" alt="" />
      <NuxtImg @click="openWeb('https://www.instagram.com/')" src="/img/re10.png" alt="" />
      <NuxtImg @click="openWeb('https://twitter.com/')" src="/img/re7.png" alt="" />
    </div>
    <dl>
      <dd v-for="(item, index) in textlist" :key="index">
        <span>{{ index + 1 }}</span>
        <p>{{ $t(item.lang) }}</p>
      </dd>
    </dl>
  </div>
</template>

<script setup lang="ts">
import {  reactive } from "vue";
let props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
});
let textlist = reactive<{ lang: string }[]>([
  {
    lang: "language.Share.guide.text1",
  },
  {
    lang: "language.Share.guide.text2",
  },
  {
    lang: "language.Share.guide.text3",
  },
  {
    lang: "language.Share.guide.text4",
  },
  {
    lang: "language.Share.guide.text5",
  },
]);
let openWeb = (url: string): void => {
  window.open(url)
}
</script>

<style scoped lang="scss">
.guide {
  width: 100%;
  padding: 0 10px;

  h3 {
    font-size: 20px;
    color: #fff;
  }

  .img {
    padding: 10px 0;
    background-color: #4a4c59;
    border-radius: 8px;
    margin: 20px 0;
    @include flex(row, space-around, center);

    img {
      width: 43px;
    }

  }

  dl {
    dd {
      padding: 10px 15px;
      @include flex(row, flex-start, center);
      border-radius: 8px;
      border: 1px solid #4c4c4f;

      span {
        display: block;
        height: 40px;
        font-size: 20px;
        color: #fff;
        width: 40px;
        line-height: 40px;
        background-color: #fff;
        background-color: #0a906c;
        border-radius: 20px;
        text-align: center;
        margin-right: 15px;
      }

      p {
        flex: 1;
        font-size: 14px;
        color: #b5bac8;
        line-height: 22px;
      }
    }

    dd+dd {
      margin-top: 20px;
    }
  }
}
</style>
